<!-- 功能按钮 -->
<template>
    <div>
        <div class="table-operator">
            <a-button size="small" @click="addButtonRow">{{$ti18('rxList.newBtn','新建')}}</a-button>
            <a-button size="small" @click="addToolbarAllRows">{{i18n('addDefault','新增默认')}} </a-button>
            <a-button size="small" @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
            <a-button size="small" @click="upRow">{{$comi18('grid.up','向上')}}</a-button>
            <a-button size="small" @click="downRow">{{$comi18('grid.down','向下')}}</a-button>
            <a-button size="small" @click="topUp">{{ i18n_('list.topUp', '置顶') }}</a-button>
            <a-button size="small" @click="bottomUp">{{ i18n_('list.bottomUp', '置底') }}</a-button>
        </div>
        <div class="table-page-search-wrapper">
            <a-form-model>
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-model-item :label="i18n('buttonMax','最大按钮显示数')">
                            <a-input-number
                                style="width: 200px"
                                v-model="buttonMax"
                                :min="1"
                                size="small"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </div>
        <rx-grid
            ref="table"
            :data-source="toolBarFields"
            :columns="toolBarColumns"
            :allowRowSelect="true"
            :multiSelect="true"
            :showPage="false"
            :bordered="true"
            id-field="toolId"
            parent-field="toolPid"
            class="table_toolBar"
            style="min-height: 300px"
        >
            <template #btnLabel="{ record }">
                <a-input v-model="record.btnLabel" />
            </template>
            <span slot="btnName" slot-scope="{ text, record, index }">
                <a-input v-model="record.btnName" />
            </span>
            <span slot="btnStyle" slot-scope="{ text, record, index }">
                <a-select v-model="record.btnStyle" :options="buttonStyle" style="width: 100%" />
            </span>

            <span slot="btnClick" slot-scope="{ text, record, index }">
                <div v-if="record.preDef">
                    {{ record.btnClick }}
                </div>
                <a-input v-else v-model="record.btnClick" />
            </span>
            <span slot="btnIcon" slot-scope="{ text, record, index }">
                <rx-input-icon v-model="record.btnIcon" @change="iconChange($event, record)" />
            </span>

            <span slot="btnShow" slot-scope="{ text, record, index }">
                <a-button size="small" @click="openShowSetting(record)">{{i18n('config','配置')}}</a-button>
                <span v-if="record.isSetedShowCondition" class="is-seted"
                    ><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('hasConfig','已配')}}</span
                >
                <a-icon
                    v-if="record.isSetedShowCondition"
                    type="delete"
                    style="margin-left: 10px"
                    @click="clearBtnShowCondition(record)"
                />
            </span>
            <span slot="btnPreCond" slot-scope="{ text, record, index }">
                <a-button size="small" @click="openPreCondSetting(record)">{{i18n('config','配置')}}</a-button>
                <span v-if="record.isSetedPreCondition" class="is-seted"
                    ><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('hasConfig','已配')}}</span
                >
                <a-icon
                    v-if="record.isSetedPreCondition"
                    type="delete"
                    style="margin-left: 10px"
                    @click="clearPreCondition(record)"
                />
            </span>
        </rx-grid>
    </div>
</template>

<script>
import { RxGrid, Util, GridMixin, BaseForm } from "@lowcode/jpaas-common-lib"
import rxInputIcon from '@/components/rxComponent/rx-input-icon'
import ButtonScript from '@/views/modules/form/core/formPermission/ButtonScript'
import FormBoListButtonPreConfig from '@/views/modules/form/core/FormBoListButtonPreConfig'

export default {
    name: 'Edit2ToolBar',
    mixins: [GridMixin, BaseForm],
    components: { RxGrid, rxInputIcon },
    props: {
        defaultValue: { type: Object, default: () => {} },
        fieldDataAll: { type: Array, default: () => []},
        formData: { type: Object, default: () => {}}
    },
    data() {
        return {
            // 最大按钮显示数
            buttonMax: 1,
            toolBarFields: [],
            toolBarColumns: [
                {
                    title: this.i18n('btnLabel','按钮名称'),
                    dataIndex: 'btnLabel',
                    scopedSlots: { customRender: 'btnLabel' },
                },
                { title: this.i18n('btnName','按钮标识'), dataIndex: 'btnName', scopedSlots: { customRender: 'btnName' } },
                { title: this.i18n('btnStyle','按钮样式'), dataIndex: 'btnStyle', scopedSlots: { customRender: 'btnStyle' } },
                { title: this.i18n('btnClick','事件函数'), dataIndex: 'btnClick', scopedSlots: { customRender: 'btnClick' } },
                { title: this.i18n('btnIcon','按钮图标'), dataIndex: 'btnIcon', scopedSlots: { customRender: 'btnIcon' } },
                { title: this.i18n('btnShow','显示条件'), dataIndex: 'btnShow', scopedSlots: { customRender: 'btnShow' } },
                { title: this.i18n('btnPreCond','前置条件'), dataIndex: 'btnPreCond', scopedSlots: { customRender: 'btnPreCond' } },
            ],
            defaultBtns: [
                {toolId:1,toolPid:0,btnLabel:this.$ti18('rxList.newBtn','新建'),btnStyle:'primary',btnName:this.formData.key+'_Add',btnIcon:'iconadd', btnClick:'add',needConfig: false,preDef:true},
                {toolId:2,toolPid:0,btnLabel:this.$ti18('rxList.editBtn','编辑'),btnStyle:'default',btnName:this.formData.key+'_Edit',btnIcon:'iconbrush',btnClick:'editOne',needConfig: false,preDef:true},
                {toolId:3,toolPid:0,btnLabel:this.$ti18('rxList.delBtn','删除'),btnStyle:'default',btnName:this.formData.key+'_Remove',btnIcon:'icontrash',btnClick:'removeByIds',needConfig: false,preDef:true},
            ],
            buttonStyle: [
                { value: 'primary', label: 'primary' },
                { value: 'default', label: 'default' },
                { value: 'dashed', label: 'dashed' },
                { value: 'danger', label: 'danger' },
                { value: 'link', label: 'link' },
            ],
        }
    },
    mounted() {
        const { buttonMax, buttonList } = this.defaultValue
        this.buttonMax = buttonMax || 1
        if(buttonList){
            this.toolBarFields=[...buttonList];
        }else{
            this.addToolbarAllRows();
        }
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.ToolBar",key);
        },
        i18n_(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        addButtonRow() {
            var data = this.$refs.table.getData()
            var maxId = 100
            for (var i = 0; i < data.length; i++) {
                if (maxId < data[i].toolId) {
                    maxId = data[i].toolId
                }
            }
            this.$refs.table.addRow({
                toolId: maxId + 1,
                toolPid: 0,
                btnLabel: '',
                btnStyle: 'default',
                btnName: '',
                btnIcon: '',
                btnClick: '',
                needConfig: false,
                preDef: false,
            })
        },
        addToolbarAllRows() {
            let btnsTree = Util.listToTree(this.defaultBtns, 'toolId', 'toolPid')
            for (let i = 0; i < btnsTree.length; i++) {
                let tmpBtns = this.toolBarFields.filter((item) => {
                    return btnsTree[i].toolId == item.toolId
                })
                if (tmpBtns.length > 0) {
                    continue
                }
                this.toolBarFields.push(btnsTree[i])
            }
        },
        removeRow() {
            var table = this.$refs.table
            table.removeRows()
            table.selectedRowKeys = []
            table.selectedRows = []
            this.$forceUpdate()
        },
        upRow() {
            this.$refs.table.moveUp()
        },
        downRow() {
            this.$refs.table.moveDown()
        },
        topUp(){
            this.$refs.table.moveTopUp();
        },
        bottomUp(){
            this.$refs.table.moveBottomUp();
        },

        iconChange(icon, record) {
            delete record['btnIcon_name']
            if (icon) {
                let iconJson = JSON.parse(icon)
                record['btnIcon_name'] = iconJson.icon
            }
        },
        /**
         * 清楚按钮条件配置
         * @param record
         */
        clearBtnShowCondition(record) {
            this.$confirm({
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: this.i18n('tipsInfo','确认删除配置吗?'),
                onOk() {
                    record.btnShow = ''
                    record.isSetedShowCondition = false
                },
                onCancel() {},
                zIndex:10000,
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
            })
        },
        /**
         * 清除按钮点击条件。
         * @param record
         */
        clearPreCondition(record) {
            this.$confirm({
                title: this.$ti18('rxMsa.tipsInfo','提示信息'),
                content: this.i18n('tipsInfo','确认删除配置吗?'),
                onOk() {
                    record.btnPreCond = ''
                    record.isSetedPreCondition = false
                },
                onCancel() {},
                zIndex:10000,
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
            })
        },
        openShowSetting(record) {
            debugger
            if (!record.btnShow) {
                record.btnShow = ''
            }
            var config = {
                curVm: this,
                widthHeight: ['800px', '500px'],
                component: ButtonScript,
                data: {
                    fieldDatas: this.fieldDataAll,
                    script: record.btnShow,
                },
                title: this.i18n('ButtonScript','按钮显示条件配置'),
            }
            Util.open(config, function (action, data) {
                if (action == 'ok') {
                    record.btnShow = data
                    record.isSetedShowCondition = true
                }
            })
        },
        openPreCondSetting(record) {
            var config = {
                curVm: this,
                max:true,
                component: FormBoListButtonPreConfig,
                data: {
                    config: record.btnPreCond,
                    fieldDatas: this.fieldDataAll
                },
                title: this.i18n('ButtonPreConfig','按钮前置条件配置'),
            }
            Util.open(config, function (action, data) {
                if (action == 'ok') {
                    record.btnPreCond = data
                    record.isSetedPreCondition = true
                }
            })
        },

        collectData() {
            let result={success:true};
            const data = this.$refs.table.getData()
            // 去除空行
            var tableData = []
            data.forEach((elem) => {
                if (elem.btnLabel && elem.btnName && elem.btnClick) {
                    tableData.push(elem)
                }
            })
            const config = {
                buttonMax: this.buttonMax ? this.buttonMax : 1,
                buttonList: tableData,
            }
            result.data=config;
            return result;
        },
    },
}
</script>

<style scoped>
.table-operator > button {
    margin-right: 6px;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 12px;
    margin-right: 0;
}

.table-page-search-wrapper .ant-form-inline .ant-form-item .ant-form-item-control-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: inline-block;
    vertical-align: middle;
}
.table_toolBar >>> .ant-table-row-indent,
.table_toolBar >>> .ant-table-row-expand-icon {
    float: left;
    margin-top: 2px;
}
.table_toolBar >>> .editable-cell {
    overflow: hidden;
}
.is-seted {
    color: #70b90b;
    margin-left: 5px;
}
</style>
